        @model Krystalware.SlickUpload.UploadSession
    @using Krystalware.SlickUpload;
@using Krystalware.SlickUpload.Web;
@using Krystalware.SlickUpload.Web.Mvc;

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "SlickUpload Quick Start Example";
}


@section head
            {
<script type="text/javascript">
    function cancelUpload()
    {
        kw("slickUpload").cancel();
    }

    function onSessionStarted(data)
    {
        document.getElementById("uploadButton").style.display = "none";
        document.getElementById("cancelButton").style.display = "block";
    }
        
    function onBeforeSessionEnd(data)
    {
        document.getElementById("cancelButton").style.display = "none";
    }
</script>

<style type="text/css">
    /* hide initially  */
    .su-fileselector, .su-folderselector, .su-filelisttemplate, .su-uploadprogressdisplay
    {
        display: none;
        zoom:1;
    }
    
    /* fileselector cursor, link color */
    .su-fileselector, .su-fileselector *, .su-folderselector, .su-folderselector *
    {
        color:blue;
        cursor:pointer;
    }

    /* hover links */
    a
    {
        text-decoration:none
    }
    
    a:hover, .su-hover a
    {
        text-decoration:underline;
    }
</style>
            }


    @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { id = "uploadForm", enctype = "multipart/form-data" })) {

                       @Html.KrystalwareRazor(new SlickUpload() { 
Id = "slickUpload",
FileSelectorHtmlAttributes = new { Style = "float:left;padding-right:1em"},
FileListHtmlAttributes = new { Style = "clear:both"},
UploadProgressDisplayHtmlAttributes = new { Style = "clear:both"},
HtmlAttributes = new { Style = "overflow: hidden; zoom: 1"},
UploadProfile = "quickStart",
OnClientUploadSessionStarted = "onSessionStarted",
OnClientBeforeSessionEnd = "onBeforeSessionEnd",
ShowDropZoneOnDocumentDragOver = true,
AutoUploadOnSubmit = true,
UploadFormId = "uploadForm",
SelectorTemplate = new Template(@<text>
                          
                                    <a href="javascript:;">Add files</a>
                                    
</text>),
SelectorFolderTemplate = new Template(@<text>
                          
                                    <a href="javascript:;">Add folder</a>
                                    
</text>),
FileItemTemplate = new Template(@<text>
                          
                                        @Html.KrystalwareRazor(new FileListElement() { Element = FileListElementType.FileName } )
                                        &ndash;
                                        @Html.KrystalwareRazor(new FileListElement() { Element = FileListElementType.FileSize, Template = new Template("(calculating)") } )
                                        @Html.KrystalwareRazor(new FileListRemoveCommand() { HtmlAttributes = new { href = "javascript:;"}, Template = new Template("[x]") } )
                                        @Html.KrystalwareRazor(new FileListElement() { Element = FileListElementType.ValidationMessage, HtmlAttributes = new { style = "color:#f00"} } )
                                    
</text>),
ProgressTemplate = new Template(@<text>
                          
                                        <div>
                                            Uploading @Html.KrystalwareRazor(new UploadProgressElement() { Element = UploadProgressElementType.FileCount } ) file(s),
                                            @Html.KrystalwareRazor(new UploadProgressElement() { Element = UploadProgressElementType.ContentLengthText, Template = new Template("(calculating)") } ).
                                        </div>
                                        <div>
                                            Currently uploading: @Html.KrystalwareRazor(new UploadProgressElement() { Element = UploadProgressElementType.CurrentFileName } )
                                            file @Html.KrystalwareRazor(new UploadProgressElement() { Element = UploadProgressElementType.CurrentFileIndex } )
                                            of @Html.KrystalwareRazor(new UploadProgressElement() { Element = UploadProgressElementType.FileCount } ).
                                        </div>
                                        <div>
                                            Speed: @Html.KrystalwareRazor(new UploadProgressElement() { Element = UploadProgressElementType.SpeedText, Template = new Template("(calculating)") } )
                                        </div>
                                        <div>
                                            @Html.KrystalwareRazor(new UploadProgressElement() { Element = UploadProgressElementType.TimeRemainingText, Template = new Template("(calculating)") } )
                                        </div>
                                        <div style="border:1px solid #008800; height: 1.5em; position: relative;">
                                            @Html.KrystalwareRazor(new UploadProgressBar() { HtmlAttributes = new { style = "background-color:#00ee00;width:0; height:1.5em;"} } )
                                            <div style="text-align: center; position: absolute; top: .15em; width: 100%;">
                                                @Html.KrystalwareRazor(new UploadProgressElement() { Element = UploadProgressElementType.PercentCompleteText, Template = new Template("(calculating)") } )
                                            </div>
                                        </div>
                                    
</text>)
 } )
@Html.KrystalwareRazor(new KrystalwareScriptRenderer())                            <hr />
                                <p>
                                    <input type="submit" value="Upload" id="uploadButton" />
                                    <input type="button" value="Cancel" id="cancelButton" style="display:none" onclick="cancelUpload()" />
                                </p>
if (Model != null) {                        
                        <text>Upload Result: </text>@Model.State.ToString()if (Model.State == UploadState.Error) {                        <br /><br /><text>
                        Message: </text>@Model.ErrorSummary}                        <ul>
                        @foreach (UploadedFile file in Model.UploadedFiles) {
                        <li>
                            @file.ClientName
                        </li>
                        }
                        </ul>
}
    }
